<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-12 16:51:46
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-20 15:20:34
-->
<template>
    <div id="bigdata">
        <div class="title">
            <img src="@/assets/header.png" alt="" />
            <div class="tab">
                <template v-for="(item, i) in tablist" :key="i">
                    <div
                        class="tab_name"
                        :class="{ active: checkName == item.tab }"
                        v-if="permissions.includes(item.auth)"
                        @click="checkTab(item.tab)"
                    >
                        <img src="@/assets/tab.png" alt="" /><span>{{ item.label }}</span>
                    </div>
                </template>
            </div>
        </div>
        <component :is="checkName" v-if="checkName"></component>
    </div>
    <div class="boxModal" v-if="!hasPermission">
        <img class="img1" src="@/assets/closepanel.png" alt="" />
        <img class="img2" src="@/assets/close.png" alt="" @click="closePage" />
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, unref, watch, nextTick, onMounted } from 'vue';
import { fahuo, xiaoshou, zonghe } from './components';
import { useRouter } from 'vue-router';

export default defineComponent({
    name: 'BigScreen',
    components: { fahuo, xiaoshou, zonghe },
    props: {},
    setup() {
        const state = reactive({
            hasPermission: true,
            checkName: 'xiaoshou',
            tablist: [
                { tab: 'xiaoshou', label: '销售数据', auth: 'xssjjk2' },
                { tab: 'fahuo', label: '发货数据', auth: 'fhsjjk2' },
                { tab: 'zonghe', label: '综合数据', auth: 'cwsjjk2' },
            ],
        });
        const permissions = localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo') as string).permissions : '';
        const router = useRouter();
        const { currentRoute } = router;
        onMounted(() => {});
        watch(
            () => currentRoute,
            (v) => {
                if (unref(v).query.name == 'xiaoshou') {
                    state.checkName = 'xiaoshou';
                    if (permissions.includes('xssjjk2')) {
                        state.hasPermission = true;
                    } else {
                        state.hasPermission = false;
                    }
                } else if (unref(v).query.name == 'fahuo') {
                    state.checkName = 'fahuo';
                    if (permissions.includes('fhsjjk2')) {
                        state.hasPermission = true;
                    } else {
                        state.hasPermission = false;
                    }
                } else if (unref(v).query.name == 'zonghe') {
                    state.checkName = 'zonghe';
                    if (permissions.includes('cwsjjk2')) {
                        state.hasPermission = true;
                    } else {
                        state.hasPermission = false;
                    }
                } else {
                    state.checkName = '';
                    state.hasPermission = false;
                }
            },
            {
                immediate: true,
            }
        );
        function checkTab(tab) {
            state.checkName = tab;
            router.push('./bigScreen?name=' + tab);
        }
        function closePage(tab) {
            router.push('./login');
            localStorage.clear();
        }
        return {
            ...toRefs(state),
            permissions,
            checkTab,
            closePage,
        };
    },
});
</script>

<style lang="scss" scoped>
#bigdata {
    width: 100%;
    height: 100vh;
    background-color: #060f46;
    .title {
        position: relative;
        .tab {
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: space-around;
            bottom: 25px;
            .tab_name {
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #ffffff;
                letter-spacing: 0;
                line-height: 16px;
                img {
                    width: 10px;
                    height: 12px;
                    margin-right: 10px;
                }
            }
            & > .tab_name.active {
                color: #72edff;
            }
            & > div:nth-child(2) {
                // border-left: 1px solid #05438b;
                // border-right: 1px solid #05438b;
                // padding: 0 20px;
            }
        }
        img {
            width: 100%;
        }
    }
}

.boxModal {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    .img1 {
        width: 290px;
        height: 300px;
    }
    .img2 {
        width: 30px;
        height: 33px;
        margin-top: 20px;
    }
}
</style>
